<style>
    .layui-input {
        height: 2.5rem;
        max-height: 40px;
    }

    .layui-input-block {
        margin-left: 0px;
        min-height: 1.5rem;
        max-height: 40px;
    }

    .layui-btn {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
    }

    .layui-input:focus,
    .layui-textarea:focus {
        border-color: #007457 !important
    }

    .layui-layer-btn .layui-layer-btn0 {
        border-color: #009688 !important;
        background-color: #009688 !important;
        color: #fff;
    }
</style>
<style type="text/css" media="screen">
    .weui-cells__title {
        color: #000;
        font-size: 17px;
    }

    .weui-cell::before {
        border-top: none;
    }

    .weui-cells::before {
        border-top: none;
    }

    .weui-cells::after {
        border-bottom: none;
    }

    .my-weui-cell {
        /* border-top: 1px solid #e5e5e5; */
        border-bottom: 1px solid #e5e5e5;
    }

    .page__hd {
        /* padding: 0px; */
        padding: 0px 5px;
        padding-top: 10px;
        /* border: 1px solid #000; */
    }

    .page__title {
        margin-top: 5px;
        font-size: 20px;
        color: #333;
        text-align: center;
    }

    @media (min-width:0px) {
        html {
            font-size: 12px;
        }
    }

    @media (min-width: 320px) {
        html {
            font-size: 12px;
        }
    }

    @media (min-width: 340px) {
        html {
            font-size: 13px;
        }
    }

    @media (min-width: 360px) {
        html {
            font-size: 14px;
        }
    }

    @media (min-width: 380px) {
        html {
            font-size: 15px;
        }
    }

    @media (min-width: 400px) {
        html {
            font-size: 15px;
        }
    }

    @media (min-width: 420px) {
        html {
            font-size: 16px;
        }
    }

    .titleName img {
        max-width: 100%;
        max-height: 100%;
    }

    .appointment {
        padding-top: 1rem;
        font-size: 1.5em;
        color: #fff;
        line-height: 2em;
        text-indent: 1rem;
    }

    .appointment-describe {
        font-size: 1em;
        color: #fff;
        text-indent: 1.2rem;
    }

    .info {
        margin: 1rem;
        background-color: #f2f2f2;
        border-radius: 3px;
        height: 5rem;
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    .allNum {
        text-align: center;
    }

    .surplusNum {
        text-align: center;
    }

    .allNum-num {
        margin-top: 1rem;
        line-height: 2rem;
        font-size: 2em;
        color: #1E9FFF;
    }

    .allNum-info {
        font-size: 1em;
        color: #666;
    }

    .nannv {
        height: 6rem;
        width: 100%;
        background: url(/assets/img/nannv.png) right bottom no-repeat
    }

    .weui-input {
        width: 100%;
        border: 1px solid #e5e5e5;
        outline: 0;
        -webkit-appearance: none;
        background-color: transparent;
        font-size: inherit;
        color: inherit;
        height: 2em;
        line-height: 2em;
    }

    .weui-btn_success {
        background-image: linear-gradient(#35a3a0, #4fae8e);
    }
     #js_cell_yes_date{
        dispaly:flex;
        flex-direction:column;
        text-align:center;
        line-height:40px;
    }
    #js_cell_yes_leave{
        dispaly:flex;
        flex-direction:column;
        text-align:center;
        line-height:70px;
    }
    .weui-input{
        height:2.2rem;
    }
</style>
<form name="form1" id="form1" role="form" data-toggle="validator" method="POST" action="">

    <div class="page">

        <div class="page__bd">
            <div class="weui-cells weui-cells_form" style="margin-top:0px;font-size:14px;">
                <div class="my-weui-cell">
                   <img src="__CDN__/assets/img/nydx.png" />
                </div>
                <div class="my-weui-cell">
                    <div style=" width:100%;background-image: linear-gradient(#35a3a0, #4fae8e)">
                        <div class="nannv" style="width: 100%;">
                            <p class="appointment">疫情期间</p>
                            <p class="appointment-describe">浴室预约登记</p>
                        </div>
                    </div>
                </div>



                <div class="weui-cell weui-cell_active" id="js_cell"
                    style="margin-left: 1rem;margin-right: 1rem; padding-left:0px;padding-right:0px; dispaly:flex; flex-direction:column;">
                    <div class="weui-cell__bd weui-flex" style="width:100%;margin-bottom:15px;">
                        <input name="yname" class="weui-input" autofocus="" type="text" placeholder="姓名"
                            style="text-indent: 0.5rem;" />
                    </div>
                    <div class="weui-cell__bd weui-flex" style="width:100%;margin-bottom:15px;">
                        <input name="ynum" class="weui-input" autofocus="" type="text" placeholder="学号/教工号/编外人员手机号"
                            style="text-indent: 0.5rem;" />
                    </div>
                </div>

                <div class="weui-cell weui-cell_active" id="js_cell_yes"
                    style="margin-left: 1rem;margin-right: 1rem; padding-left:0px;padding-right:0px; dispaly:none">
                    <div class="weui-cell__bd weui-flex" id="js_cell_yes_date">
                        
                    </div>
                </div>

            </div>
            <div id="book_button" style="margin-top: 15px;">
                <span id="formSubmitBtn" type="submit" class="weui-btn weui-btn_success">登记进入</span>
            </div>
        </div>
    </div>
</form>

<script>
    // // 设置rem大小
    // function fontSize() {
    //     var deviceWidth = document.documentElement.clientWidth > 768 ? 768 : document.documentElement.clientWidth;
    //     document.documentElement.style.fontSize = (deviceWidth / 25) + "px";
    // }
    // fontSize();
    // window.onresize = fontSize;
   
    // // 登记预约方法
    document.getElementById('formSubmitBtn').onclick = function () {
        var name = $("input[name='yname']").val();
        if (name == '') {
            $.alert("请输入姓名！");
            return false;
        }
        var num = $("input[name='ynum']").val();
        if (num == '') {
            $.alert("请输入学号！");
            return false;
        }
        setInterval(function () {
            var date = new Date();//获得当前时间
            var yy = date.getFullYear();//年份
            var mm = date.getMonth() + 1;//获得月份
            mm = (mm < 10 ? "0" + mm : mm);//月份小于10时，前面加个0(例如9 ->09)天，小时，分钟，秒同理
            var dd = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());//天
            var hours = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours());//小时
            var minutes = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());//分钟
            var seconds = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());//秒
            document.getElementById("current-time").innerHTML = yy + '年' + mm + "月" + dd + "日 " + hours + ':' + minutes + ':' + seconds;
            
            }, 1000);

        $.ajax({
            data: { username: name, sid: num },
            url: "index/bathhouse/into/ids/"+{$ids},
            type: "post",
            success: function (res) {
                if (res.code == 1) {
                    window.localStorage.book_username= name;
                    window.localStorage.book_usernum = num;
                    $.alert(res.msg, function () {
                        $("#js_cell").hide();
                        $("#js_cell_yes").show();
                        $("#js_cell_yes_date").html('<p style="font-size:18px">姓名：'+name+'</p><p style="font-size:18px">学号：'+num+'</p><p style="font-size:24px;color:red;">进入浴室成功</p><p style="font-size:18px">当前时间：</p><p id="current-time" style="color:red;font-size:24px;"></p>');
                        $("#book_button").hide();
                    });
                } else {
                    $.alert({
                        title: res.msg,
                        onOK: function () {
                            if(res.code == 0 )
                            {
                                window.location.href="/index.php/index/bathhouse/index";
                            }
                        }
                    });
                }
            }
        })
    } 
    // 设置rem大小
    // function fontSize() {
    //     var deviceWidth = document.documentElement.clientWidth > 768 ? 768 : document.documentElement.clientWidth;
    //     document.documentElement.style.fontSize = (deviceWidth / 25) + "px";
    // }
    // fontSize();
    // window.onresize = fontSize;
   
    // 登记预约方法
    // document.getElementById('formSubmitBtn').onclick = function () {
        
    // }
    // $(function () { 
    //     var name = $("input[name='yname']").val();
    //     alert(name)
    // });


    // var name = $("input[name='yname']").val();
    // if (name == '') {
    //     $.alert("请输入姓名！");
    //     return false;
    // }
    // alert(name);
    // var num = $("input[name='ynum']").val();
    // if (num == '') {
    //     $.alert("请输入学号！");
    //     return false;
    // }
    // setInterval(function () {
    //     var date = new Date();//获得当前时间
    //     var yy = date.getFullYear();//年份
    //     var mm = date.getMonth() + 1;//获得月份
    //     mm = (mm < 10 ? "0" + mm : mm);//月份小于10时，前面加个0(例如9 ->09)天，小时，分钟，秒同理
    //     var dd = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());//天
    //     var hours = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours());//小时
    //     var minutes = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());//分钟
    //     var seconds = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());//秒
    //     document.getElementById("current-time").innerHTML = yy + '年' + mm + "月" + dd + "日 " + hours + ':' + minutes + ':' + seconds;
        
    //     }, 1000);

    // $.ajax({
    //     data: { username: name, sid: num },
    //     url: "{:url('index/shower/into')}",
    //     type: "post",
    //     success: function (res) {
    //         if (res.code == 1) {
    //             $.alert(res.msg, function () {
    //                 $("#js_cell").hide();
    //                 $("#js_cell_yes").show();
    //                 $("#js_cell_yes_date").html('<p>姓名：'+name+'</p><p>学号：'+num+'</p><p>进入浴室成功</p><p>当前时间：<span id="current-time"></span></p>');
    //                 $("#book_button").hide();
    //             });
    //         } else {
    //             $.alert(res.msg);
    //         }
    //     }
    // });


</script>